<template>
	<div class="banner">
		<div class="banner-inner">
			<el-carousel class="carousel" :autoplay="false" height="100%">
				<el-carousel-item v-for="item in carouselItem" :key="item.slogan">
					<div :key="item.slogan" class="carousel-item">
						<div class="carousel-title">{{ item.slogan }}</div>
						<div class="carousel-sub-title">{{ item.subSlogan }}</div>
						<img class="carousel-image" :src="item.image" alt="login banner" />
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script lang="ts" setup>
import bannerImage from 'assets/images/login-banner.png'
const carouselItem = computed(() => [
	{
		slogan: '开箱即用的高质量模板',
		subSlogan: '丰富的的页面模板，覆盖大多数典型业务场景',
		image: bannerImage,
	},
	{
		slogan: '内置了常见问题的解决方案',
		subSlogan: '国际化，路由配置，状态管理应有尽有',
		image: bannerImage,
	},
	{
		slogan: '接入可视化增强工具AUX',
		subSlogan: '实现灵活的区块式开发',
		image: bannerImage,
	},
])
</script>

<style lang="less" scoped>
.banner {
	display: flex;
	align-items: center;
	justify-content: center;

	&-inner {
		width: 100%;
		height: 100%;
	}
}

.carousel {
	height: 100%;

	&-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	&-title {
		color: var(--el-color-white);
		font-weight: 500;
		font-size: 20px;
		line-height: 28px;
	}

	&-sub-title {
		margin-top: 8px;
		color: var(--el-color-primary-light-9);
		font-size: 14px;
		line-height: 22px;
	}

	&-image {
		width: 320px;
		margin-top: 30px;
	}
}
</style>
